<!--
 * @Author: guo-chengjiang 1029833238@qq.com
 * @Date: 2025-03-31 10:41:58
 * @LastEditors: guo-chengjiang 1029833238@qq.com
 * @LastEditTime: 2025-04-02 11:42:15
 * @FilePath: \online-exam-system\src\views\Mainview.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main-container">
    <el-container>
      <!-- 侧边栏组件 -->
      <side-bar></side-bar>
      
      <el-container direction="vertical">
        <!-- 顶部导航组件 -->
        <div class="top-container">
          <system-header></system-header>
        </div>
        
        <!-- 主内容区 -->
        <el-main class="main-content">
          <router-view v-if="$route.matched.length" /> 
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import SideBar from '@/components/SideBar'
import SystemHeader from '@/components/SystemHeader'

export default {
  name: 'MainView',
  components: {
    SideBar,
    SystemHeader
  }
}
</script>

<style scoped>
.main-container {
  height: 100vh;
  overflow: hidden;
  display: flex;
}

/* 顶部容器样式 */
.top-container {
  background-color: #545c64;
  color: white;
  border-bottom: 1px solid #545c64;
  height: 69px; 
  /* padding: 0 20px; */
  display: flex;
  align-items: center;
}

/* 主内容区样式 */
.main-content {
  background-color: #f5f7fa;
  overflow-y: auto;
  flex: 1;
}

.el-container {
  height: 100%;
}
.el-main {
  padding: 0;
}
</style>